<template>


	<scroll-view scroll-y="true" class="container">
		<view class="">
			<view class="register-box">
				<image :src="$util.img(infos.logo)" mode="aspectFit" class="logo"></image>
				<text>注册</text>
			</view>
			<view class="to-register">
				<text>已有账号，立即</text><text class="register-text-title" @click="redirectToLinks('/pages/login/login/login')">登录</text>
			</view>

		</view>

		<view class="inputs">
			<view class="input-item">
				<input type="text" placeholder="请输入账号" v-model="formData.username"></input>
			</view>
			<view class="input-item input-item-top">
				<input type="password" placeholder="请输入密码" v-model="formData.password"></input>
			</view>
			<view class="input-item input-item-top">
				<input type="password" placeholder="请确认密码" v-model="formData.rePassword"></input>
			</view>
			<view class="input-item input-item-top">
				<input type="text" placeholder="请输入推荐码(可选)" v-model="formData.code"></input>
			</view>
			<view class="input-item input-item-top border-none">
				<view class="content">
					<input type="text" placeholder="请输入验证码" placeholder-class="input-placeholder" class="vercode" v-model="formData.vercode" />
					<image :src="captcha.img" mode="" class="vercode-img" @click="getCaptcha"></image>
				</view>
			</view>
		</view>


	<!-- 	<view class="">
			<view class="data-title">
				<text>企业资料上传<text class="text-font-red">(要求照片清晰)</text></text>
			</view>
			<view class="uploading">
				<view class="data-image"> -->
					<!-- 上传营业执照 -->
					<!-- <view class="uploade" v-if="license == ''" @click="selectLicense">
						<view class="add"> + </view>
						<view class=""> 上传营业执照 </view>
					</view> -->
					<!-- 显示营业执照 -->
			<!-- 		<view v-else class="image-up">
						<view class="del" @click="license = ''">
							<image :src="$util.img('/upload/uniapp/del.png')" mode=""></image>
						</view> -->

						<!-- 放置图片 -->
		<!-- 				<image :src="license" mode=""></image>
					</view>
				</view>
				<view class="data-image">
					<view class="uploade" v-if="qualification == ''" @click="selectQualification">
						<view class="add">
							+
						</view>
						<view class="">
							上传增值税资质
						</view>
					</view>
					<view v-else class="image-up"> -->
						<!-- 放置图片 -->
		<!-- 				<view class="del-r" @click="qualification = ''">
							<image :src="$util.img('/upload/uniapp/del.png')" mode=""></image>
						</view>
						<image :src="qualification" mode=""></image>
					</view>
				</view>
			</view> -->

		</view>

		<view class="footer-register">
			<!-- <button class="footer-button" @click="redirectToLink('/pages/login/register/audit')">注册</button> -->
			<button class="footer-button" @click="register">注册</button>
			<text class="agreement">点击注册即代表您已同意<text class="text-font-red" @click="openPopup">《注册协议》</text></text>
		</view>
		
		<view @touchmove.stop>
			<uni-popup ref="registerPopup" type="center" class="wap-floating">
				<view class="conten-box">
					<view class="title ns-text-color">{{ regisiterAgreement.title }}</view>
					<view class="con">
						<rich-text :nodes="regisiterAgreement.content"></rich-text>
					</view>
				</view>
			</uni-popup>
		</view>

	</scroll-view>
</template>

<script>
	import validate from 'common/js/validate.js';
	import auth from 'common/js/auth.js'; //1
	export default {
		data() {
			return {
				license: '', //营业执照
				qualification: '', //增置税执照
				imgList: [],
				formData: {
					// account: '', //手机号
					password: '', //密码
					phonecode: '', //验证码
					// tuijiancode: '', //推广码
					rePassword: '',
					vercode: '',
					license: '',
					qualification: '',
					member_type: 1,
					code: '',
					rePassword: '',
					username: '',
				},
				tuijiancode_option: false,
				captcha: {
					img: '',
					id: ''
				},
				dynacodeData: {
					seconds: 120,
					timer: null,
					codeText: '获取动态码',
					isSend: false
				},
				phone_test: '', //获取验证码时的信息
				regisiterAgreement: {
					// 注册协议
					title: '',
					content: ''
				},
				isSub: false,
				back: '', // 返回页
				// logo图
				infos: {},

			};
		},
		mixins: [auth],
		onShow() {
			// 获取网站信息
			this.getInfo()
			this.getCaptcha(); //获取图形验证码
			this.getRegisiterAggrement();
		},

		methods: {
			redirectToLinks(url) {
				this.$util.redirectTo(url);
			},
			register(url) {
				let {
					username,
					password,
					rePassword,
					vercode
				} = this.formData;
				if (!username) {
					uni.showToast({
						icon: 'none',
						title: '请输入用户名'
					})
					return false;
				}
				if (!password) {
					uni.showToast({
						icon: 'none',
						title: '请输入密码'
					})
					return false;
				}
				if (password.length < 6) {
					uni.showToast({
						icon: 'none',
						title: '密码最小为6位'
					})
					return false;
				}
				if (!(rePassword)) {
					uni.showToast({
						icon: 'none',
						title: '请输入确认密码'
					})
					return false;
				}
				if (password !== rePassword) {
					uni.showToast({
						icon: 'none',
						title: '两次输入的密码不一致'
					})
					return false;
				}
				if (!(vercode)) {
					uni.showToast({
						icon: 'none',
						title: '请输入验证码'
					})
					return false;
				}
				if (password !== rePassword) {
					uni.showToast({
						icon: 'none',
						title: '两次输入的密码不一致'
					})
					return false;
				}
				// if (!(this.license)) {
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: '请上传营业执照'
				// 	})
				// 	return false;
				// }
				// if (!(this.qualification)) {
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: '请上传增值税资质'
				// 	})
				// 	return false;
				// }
				var data = {
					username: this.formData.username.trim(),
					password: this.formData.password.trim(),
				};
				if (this.captcha.id != '') {
					data.captcha_id = this.captcha.id;
					data.captcha_code = this.formData.vercode;
				}
				// console.log(this.authInfo);

				if (Object.keys(this.authInfo).length) {
					data[this.authInfo.auth_tag] = this.authInfo.auth_openid;
				}
				// console.log(8);
				if (this.userInfo.avatarUrl != '') data.headimg = this.userInfo.avatarUrl;
				if (uni.getStorageSync('source_member')) data.source_member = uni.getStorageSync('source_member');
				this.$api.sendRequest({
					url: '/api/register/username',
					data: {
						member_type: this.formData.member_type,
						username: this.formData.username,
						password: this.formData.password,
						code: this.formData.code,
						// license: this.license,
						// qualification: this.qualification,
						captcha_id: this.captcha.id,
						captcha_code: this.formData.vercode,
					},

					success: res => {
						if (res.code >= 0) {
							uni.setStorage({
								key: 'registerInfo',
								data: {
									username: this.formData.username,
									password: this.formData.password,
									code: this.formData.code, //推广码
									// license: this.license,
									// qualification: this.qualification,
								}
							})
							uni.setStorage({
								key: 'token',
								data: res.data.token,
								success: () => {
									uni.removeStorageSync('loginLock');
									uni.removeStorageSync('unbound');
									uni.removeStorageSync('authInfo');
									// if (this.back != '') {
									// 	this.$util.redirectTo(this.back, {}, 'reLaunch');
									// } else {
									// 	this.$util.redirectTo('/pages/member/index/index', {}, 'reLaunch');
									// }
									this.$util.redirectTo('/pages/login/register/authentication')
								}
							});
						} else {
							this.isSub = false;
							this.getCaptcha();
							this.$util.showToast({
								title: res.message
							});
						}
					},
					fail: res => {
						this.isSub = false;
						this.getCaptcha();
					}
				});

			},
			// 营业执照
			// selectLicense() {
			// 	let that = this;
			// 	uni.chooseImage({
			// 		count: 1, //只允许上传1张
			// 		sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			// 		sourceType: ['album'], //从相册选择
			// 		success: function(res) {
			// 			that.license = res.tempFilePaths[0]

			// 		}
			// 	});
			// },
			// 增置税执照
			// selectQualification() {
			// 	let that = this;
			// 	uni.chooseImage({
			// 		count: 1, //只允许上传2张
			// 		sizeType: ['original', 'compressed'],
			// 		sourceType: ['album'], //从相册选择
			// 		success: function(res) {
			// 			that.qualification = res.tempFilePaths[0]
			// 		}
			// 	});
			// },
			// 上传图片
			upload(item) {
				console.log('上传图片');
			},
			reduce(ite) {
				this.imgList = this.imgList.filter((item) => item != ite)
			},


			/**
			 * 获取验证码
			 */
			getCaptcha() {
				this.$api.sendRequest({
					url: '/api/captcha/captcha',
					data: {
						captcha_id: this.captcha.id
					},
					success: res => {
						if (res.code >= 0) {
							this.captcha = res.data;
							this.captcha.img = this.captcha.img.replace(/\r\n/g, '');
						}
					}
				});
			},
			Getphonecode() {
				let reg_tel = /^(13[0-9]|14[01456879]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[0-3,5-9])\d{8}$/;
				if (reg_tel.test(this.formData.account.trim())) {
					if (this.dynacodeData.codeText == '获取动态码') {
						this.$refs.phone_Popup.open()
						// 开始倒计时
						this.GetimgCode()
					} else {
						uni.showToast({
							title: this.dynacodeData.codeText,
							icon: 'none'
						})
					}

				} else {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					})
				}

			},
			// 获取图片验证码
			GetimgCode() {
				console.log(54612)
				this.$api.sendRequest({
					url: '/api/captcha/captcha',
					data: {
						captcha_id: ''
					},
					success: res => {
						console.log(res)
						if (res.code >= 0) {
							this.captcha = res.data;
							this.captcha.img = this.captcha.img.replace(/\r\n/g, '');
						}
					}
				});

			},

			getInfo() {
				// 获取网站信息
				this.$api.sendRequest({
					url: '/api/website/info',
					success: res => {
						if (res.code == 0) {
							this.infos = res.data;

							// console.log('获取网站信息1' + this.infos.longitude);
							// console.log('获取网站信息2' + this.infos.latitude);
						}
					}
				});
			},
			
			/**
			 * 展示注册协议
			 */
			openPopup() {
				if (this.regisiterAgreement.content != '') {
					this.$refs.registerPopup.open();
				}
			},
			/**
			 * 获取注册协议
			 */
			getRegisiterAggrement() {
				this.$api.sendRequest({
					url: '/api/register/aggrement',
					success: res => {
						if (res.code >= 0) {
							this.regisiterAgreement = res.data;
						}
					}
				});
			},

		}
	}
</script>

<style lang="scss" scoped>
	/deep/.uni-input-placeholder {
		color: #CACACA;
	}

	.register-text-title {
		color: #FF4544;
	}

	.register-text {
		background-color: #FF4544;
	}

	.footer-button {
		width: 624rpx;
		height: 90rpx;
		line-height: 90rpx;
		font-size: 30rpx;
		background: #FF4544;
		margin: 0;
		color: #FFFFFF;
	}

	.container {
		box-sizing: border-box;
		padding: 0 62rpx;

		.register-box {
			display: flex;
			justify-content: left;
			align-items: center;
			margin-top: 90rpx;
			height: 57rpx;
			font-size: 60rpx;
			font-weight: bold;
			color: #494949;
			line-height: 57rpx;

			.logo {
				width: 70rpx;
				height: 70rpx;
				margin-right: 10rpx;
			}

		}

		.to-register {
			margin-top: 28rpx;
			color: #959595;


		}

		.inputs {
			margin-top: 80rpx;

			.input-item-top {
				margin-top: 72rpx;
			}

			.content {
				display: flex;
				justify-content: space-between;
			}
		}

		.input-item {
			height: 70rpx;
			border-bottom: 1rpx solid #DEDEDE;

			input {
				padding-left: 12rpx;
			}

			image {
				padding-bottom: 12rpx;
				height: 30px;
				width: 100px;
			}

		}




		.data-title {
			margin-top: 63rpx;
			font-size: 30rpx;
		}

		.text-font-red {
			font-size: 24rpx;
			color: red;
		}

		.uploade {
			width: 300rpx;
			height: 194rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			border: 1rpx dashed #CCCCCC;

			.add {
				font-size: 48rpx;
				color: #909399;
				z-index: 99;

				image {
					border-radius: 50%;
				}
			}

			:nth-child(2) {
				color: #4B4C4D;
			}
		}

		.uploading {
			display: flex;
			justify-content: space-between;
			margin: 64rpx 0;

			.image-up {
				width: 300rpx;
				height: 194rpx;

				image {
					width: 100%;
					height: 100%;
				}

				.del {
					position: absolute;
					width: 37rpx;
					height: 37rpx;
					right: 50%;
					top: 71%;
					z-index: 99;
				}

				.del-r {
					position: absolute;
					width: 37rpx;
					height: 37rpx;
					right: 0%;
					top: 71%;
					z-index: 99;

					image {
						border-radius: 50%;
					}
				}
			}
		}

		.footer-register {
			display: flex;
			flex-direction: column;
			align-items: center;
			color: #838383;
			margin-top: 50rpx;
			.agreement {
				margin-top: 37rpx;
				font-size: 24rpx;
			}
		}
		
	}
	
	// 注册协议
	.conten-box {
		padding: 0 $ns-padding $ns-padding;
		
		.title {
			line-height: 100rpx;
			font-size: $ns-font-size-lg + 4rpx;
			font-weight: bold;
			border-bottom: 2rpx solid $ns-border-color-gray;
			margin-bottom: $ns-margin;
		}
		.con {
			width: 100%;
			min-height: 600rpx;
			overflow-y: scroll;
			text-align: left;
			text-indent: 50rpx;
		}
	}
	// .border-none{
	// 	border: none !important;
	// }
	//
</style>
